<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/reset.css">
    <script src="js/main.js"></script>
    <title>小米商城</title>
</head>

<body>
    <!--第一个总容器-->
    <div class="wrapper-first">

        <!--顶部导航栏菜单-->
        <header>
            <div class="menu">
                <div class="menu-left">
                    <ul>
                        <li><a href="https://www.mi.com/shop">小米商城</a></li>
                        <li><a href="#">MIUI</a></li>
                        <li><a href="#">IoT</a></li>
                        <li><a href="#">云服务</a></li>
                        <li><a href="#">金融</a></li>
                        <li><a href="#">有品</a></li>
                        <li><a href="#">小爱开放平台</a></li>
                        <li><a href="#">资质证明</a></li>
                        <li><a href="#">协议规则</a></li>
                        <li><a href="#">下载app</a></li>
                        <li><a href="#">Select Location</a></li>
                    </ul>
                </div>

                <div class="menu-right">
                    <ul>
                        <li><a href="#">登录</a></li>
                        <li><a href="#">注册</a></li>
                        <li><a href="#">消息通知</a></li>
                    </ul>
                    <!--购物车-->
                    <div class="cart" id="cart">
                        <i class="fa fa-shopping-cart fa-lg"></i>&numsp;购物车(0)
                        <!--隐藏层-->
                        <div class="cart-box" id="cartbox">
                            购物车中还没有商品，赶紧选购吧！
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!--首页导航栏和搜索框-->
        <div class="navi">
            <!--logo-->
            <div class="navi-left">
                <img src="src/logo.png" alt="x">
            </div>
            <div class="navi-mid">
                <ul>
                    <li class="navi-mid-li">
                        <a href="#">小米手机</a>
                        <!--隐藏层-->
                        <div class="goods">
                            <ul>
                                <li>
                                    <img src="src/xiaomi01.jpg">
                                    <h3>小米10 青春版 5G</h3>
                                    <p>2099元起</p>
                                </li>
                                <li>
                                    <img src="src/xiaomi02.jpg">
                                    <h3>小米10 Pro</h3>
                                    <p>4999元起</p>
                                </li>
                                <li>
                                    <img src="src/xiaomi03.jpg">
                                    <h3>小米10</h3>
                                    <p>3799元起</p>
                                </li>
                                <li>
                                    <img src="src/xiaomi04.jpg">
                                    <h3>小米CC9</h3>
                                    <p>1499元起</p>
                                </li>
                                <li>
                                    <img src="src/xiaomi05.jpg">
                                    <h3>小米CC9e</h3>
                                    <p>1099元起</p>
                                </li>
                                <li>
                                    <img src="src/xiaomi06.jpg">
                                    <h3>小米CC9 美图定制版</h3>
                                    <p>1999元起</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="navi-mid-li">
                        <a href="#">Redmi 红米</a>
                        <!--隐藏层-->
                        <div class="goods">
                            <ul>
                                <li>
                                    <img src="src/redmi01.jpg">
                                    <h3>小米10 青春版 5G</h3>
                                    <p>2099元起</p>
                                </li>
                                <li>
                                    <img src="src/redmi02.jpg">
                                    <h3>小米10 Pro</h3>
                                    <p>4999元起</p>
                                </li>
                                <li>
                                    <img src="src/redmi03.jpg">
                                    <h3>小米10</h3>
                                    <p>3799元起</p>
                                </li>
                                <li>
                                    <img src="src/redmi04.jpg">
                                    <h3>小米CC9</h3>
                                    <p>1499元起</p>
                                </li>
                                <li>
                                    <img src="src/redmi05.jpg">
                                    <h3>小米CC9e</h3>
                                    <p>1099元起</p>
                                </li>
                                <li>
                                    <img src="src/redmi06.jpg">
                                    <h3>小米CC9 美图定制版</h3>
                                    <p>1999元起</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="navi-mid-li">
                        <a href="#">电视</a>
                        <!--隐藏层-->
                        <div class="goods">
                            <ul>
                                <li>
                                    <img src="src/areaImg01_01.png">
                                    <h3>小米10 青春版 5G</h3>
                                    <p>2099元起</p>
                                </li>
                                <li>
                                    <img src="src/areaImg01_02.png">
                                    <h3>小米10 Pro</h3>
                                    <p>4999元起</p>
                                </li>
                                <li>
                                    <img src="src/areaImg01_03.png">
                                    <h3>小米10</h3>
                                    <p>3799元起</p>
                                </li>
                                <li>
                                    <img src="src/areaImg01_04.png">
                                    <h3>小米CC9</h3>
                                    <p>1499元起</p>
                                </li>
                                <li>
                                    <img src="src/areaImg01_05.png">
                                    <h3>小米CC9e</h3>
                                    <p>1099元起</p>
                                </li>
                                <li>
                                    <img src="src/areaImg01_06.png">
                                    <h3>小米CC9 美图定制版</h3>
                                    <p>1999元起</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="navi-mid-li">
                        <a href="#">笔记本</a>
                        <!--隐藏层-->
                        <div class="goods">
                            <ul>
                                <li>
                                    <img src="src/shangou_goods08.png">
                                    <h3>小米10 青春版 5G</h3>
                                    <p>2099元起</p>
                                </li>
                                <li>
                                    <img src="src/shangou_goods08.png">
                                    <h3>小米10 Pro</h3>
                                    <p>4999元起</p>
                                </li>
                                <li>
                                    <img src="src/shangou_goods08.png">
                                    <h3>小米10</h3>
                                    <p>3799元起</p>
                                </li>
                                <li>
                                    <img src="src/shangou_goods08.png">
                                    <h3>小米CC9</h3>
                                    <p>1499元起</p>
                                </li>
                                <li>
                                    <img src="src/shangou_goods08.png">
                                    <h3>小米CC9e</h3>
                                    <p>1099元起</p>
                                </li>
                                <li>
                                    <img src="src/shangou_goods08.png">
                                    <h3>小米CC9 美图定制版</h3>
                                    <p>1999元起</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="navi-mid-li">
                        <a href="#">家电</a>
                        <!--隐藏层-->
                        <div class="goods">
                            <ul>
                                <li>
                                    <img src="src/areaImg01_05.png">
                                    <h3>小米10 青春版 5G</h3>
                                    <p>2099元起</p>
                                </li>
                                <li>
                                    <img src="src/areaImg01_06.png">
                                    <h3>小米10 Pro</h3>
                                    <p>4999元起</p>
                                </li>
                                <li>
                                    <img src="src/areaImg01_07.png">
                                    <h3>小米10</h3>
                                    <p>3799元起</p>
                                </li>
                                <li>
                                    <img src="src/areaImg01_08.png">
                                    <h3>小米CC9</h3>
                                    <p>1499元起</p>
                                </li>
                                <li>
                                    <img src="src/areaImg01_09.png">
                                    <h3>小米CC9e</h3>
                                    <p>1099元起</p>
                                </li>
                                <li>
                                    <img src="src/areaImg01_10.png">
                                    <h3>小米CC9 美图定制版</h3>
                                    <p>1999元起</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="navi-mid-li">
                        <a href="#">路由器</a>
                        <!--隐藏层-->
                        <div class="goods">
                            <ul>
                                <li>
                                    <img src="src/xiaomi01.jpg">
                                    <h3>小米10 青春版 5G</h3>
                                    <p>2099元起</p>
                                </li>
                                <li>
                                    <img src="src/xiaomi02.jpg">
                                    <h3>小米10 Pro</h3>
                                    <p>4999元起</p>
                                </li>
                                <li>
                                    <img src="src/xiaomi03.jpg">
                                    <h3>小米10</h3>
                                    <p>3799元起</p>
                                </li>
                                <li>
                                    <img src="src/xiaomi04.jpg">
                                    <h3>小米CC9</h3>
                                    <p>1499元起</p>
                                </li>
                                <li>
                                    <img src="src/xiaomi05.jpg">
                                    <h3>小米CC9e</h3>
                                    <p>1099元起</p>
                                </li>
                                <li>
                                    <img src="src/xiaomi06.jpg">
                                    <h3>小米CC9 美图定制版</h3>
                                    <p>1999元起</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="navi-mid-li">
                        <a href="#">智能硬件</a>
                        <!--隐藏层-->
                        <div class="goods">
                            <ul>
                                <li>
                                    <img src="src/shangou_goods01.png">
                                    <h3>小米10 青春版 5G</h3>
                                    <p>2099元起</p>
                                </li>
                                <li>
                                    <img src="src/shangou_goods02.png">
                                    <h3>小米10 Pro</h3>
                                    <p>4999元起</p>
                                </li>
                                <li>
                                    <img src="src/shangou_goods03.png">
                                    <h3>小米10</h3>
                                    <p>3799元起</p>
                                </li>
                                <li>
                                    <img src="src/shangou_goods04.png">
                                    <h3>小米CC9</h3>
                                    <p>1499元起</p>
                                </li>
                                <li>
                                    <img src="src/shangou_goods05.png">
                                    <h3>小米CC9e</h3>
                                    <p>1099元起</p>
                                </li>
                                <li>
                                    <img src="src/shangou_goods06.png">
                                    <h3>小米CC9 美图定制版</h3>
                                    <p>1999元起</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="navi-mid-li"><a href="#">服务</a></li>
                    <li class="navi-mid-li"><a href="#">社区</a></li>
                </ul>
            </div>
            <!--搜索框-->
            <div class="navi-right">
                <form action="">
                    <input type="text" placeholder="小米10" id="search" />
                    <button type="button" id="btn_search"><i class="fa fa-search"></i></button>
                </form>
            </div>
        </div>


        <!--section-->
        <section>
            <!--横幅广告-->
            <div class="banner">
                <!--轮播图-->
                <div class="banner-lunbo" id="lunbo">
                    <img src="src/lunbo1.jpg">
                    <img src="src/lunbo2.jpg">
                    <img src="src/lunbo3.jpg">
                    <img src="src/lunbo4.jpg">
                    <img src="src/lunbo5.jpg">
                </div>
                <div class="banner-mengban"></div>

                <!--轮播图上广告-->
                <ul class="banner-ul" id="bannerUl">
                    <li>
                        <a>手机 电话卡</a>
                        <i class="fa fa-angle-right"></i>
                        <!--隐藏层-->
                        <div class="banner-box">
                            <p><img src="src/xiaomi01.jpg">小米10 青春版 5G</p>
                            <p><img src="src/xiaomi02.jpg">小米10 Pro</p>
                            <p><img src="src/xiaomi03.jpg">小米10</p>
                            <p><img src="src/xiaomi04.jpg">小米CC9</p>
                        </div>
                    </li>
                    <li>
                        <a>电视 盒子</a>
                        <i class="fa fa-angle-right"></i>
                        <!--隐藏层-->
                        <div class="banner-box">
                            <p><img src="src/areaImg01_01.png">小米10 青春版 5G</p>
                            <p><img src="src/areaImg01_02.png">小米10 Pro</p>
                            <p><img src="src/areaImg01_03.png">小米10</p>
                            <p><img src="src/areaImg01_04.png">小米CC9</p>
                        </div>
                    </li>
                    <li>
                        <a>笔记本 显示器 平板</a>
                        <i class="fa fa-angle-right"></i>
                        <!--隐藏层-->
                        <div class="banner-box">
                            <p><img src="src/areaImg01_09.png">小米10 青春版 5G</p>
                            <p><img src="src/areaImg01_09.png">小米10 Pro</p>
                            <p><img src="src/areaImg01_09.png">小米10</p>
                            <p><img src="src/areaImg01_09.png">小米CC9</p>
                        </div>
                    </li>
                    <li>
                        <a>家电 插线板</a>
                        <i class="fa fa-angle-right"></i>
                        <!--隐藏层-->
                        <div class="banner-box">
                            <p><img src="src/xiaomi01.jpg">小米10 青春版 5G</p>
                            <p><img src="src/xiaomi02.jpg">小米10 Pro</p>
                            <p><img src="src/xiaomi03.jpg">小米10</p>
                            <p><img src="src/xiaomi04.jpg">小米CC9</p>
                        </div>
                    </li>
                    <li>
                        <a>出行 穿戴</a>
                        <i class="fa fa-angle-right"></i>
                        <!--隐藏层-->
                        <div class="banner-box">
                            <p><img src="src/areaImg04_02.png">小米10 青春版 5G</p>
                            <p><img src="src/areaImg04_05.png">小米10 Pro</p>
                            <p><img src="src/areaImg04_06.png">小米10</p>
                            <p><img src="src/areaImg04_07.png">小米CC9</p>
                        </div>
                    </li>
                    <li>
                        <a>智能 路由器</a>
                        <i class="fa fa-angle-right"></i>
                        <!--隐藏层-->
                        <div class="banner-box">
                            <p><img src="src/xiaomi01.jpg">小米10 青春版 5G</p>
                            <p><img src="src/xiaomi02.jpg">小米10 Pro</p>
                            <p><img src="src/xiaomi03.jpg">小米10</p>
                            <p><img src="src/xiaomi04.jpg">小米CC9</p>
                        </div>
                    </li>
                    <li>
                        <a>电源 配件</a>
                        <i class="fa fa-angle-right"></i>
                        <!--隐藏层-->
                        <div class="banner-box">
                            <p><img src="src/xiaomi01.jpg">小米10 青春版 5G</p>
                            <p><img src="src/xiaomi02.jpg">小米10 Pro</p>
                            <p><img src="src/xiaomi03.jpg">小米10</p>
                            <p><img src="src/xiaomi04.jpg">小米CC9</p>
                        </div>
                    </li>
                    <li>
                        <a>健康 儿童</a>
                        <i class="fa fa-angle-right"></i>
                        <!--隐藏层-->
                        <div class="banner-box">
                            <p><img src="src/xiaomi01.jpg">小米10 青春版 5G</p>
                            <p><img src="src/xiaomi02.jpg">小米10 Pro</p>
                            <p><img src="src/xiaomi03.jpg">小米10</p>
                            <p><img src="src/xiaomi04.jpg">小米CC9</p>
                        </div>
                    </li>
                    <li>
                        <a>耳机 音箱</a>
                        <i class="fa fa-angle-right"></i>
                        <!--隐藏层-->
                        <div class="banner-box">
                            <p><img src="src/areaImg02_04.png">小米10 青春版 5G</p>
                            <p><img src="src/areaImg02_05.png">小米10 Pro</p>
                            <p><img src="src/areaImg03_03.png">小米10</p>
                            <p><img src="src/areaImg03_04.png">小米CC9</p>
                        </div>
                    </li>
                    <li>
                        <a>生活 箱包</a>
                        <i class="fa fa-angle-right"></i>
                        <!--隐藏层-->
                        <div class="banner-box">
                            <p><img src="src/xiaomi01.jpg">小米10 青春版 5G</p>
                            <p><img src="src/xiaomi02.jpg">小米10 Pro</p>
                            <p><img src="src/xiaomi03.jpg">小米10</p>
                            <p><img src="src/xiaomi04.jpg">小米CC9</p>
                        </div>
                    </li>
                </ul>
            </div>

            <!--产品部分-->
            <div class="product">
                <!--左侧链接-->
                <ul>
                    <li>
                        <i class="fa fa-clock-o"></i>
                        <span>小米秒杀</span>
                    </li>
                    <li>
                        <i class="fa fa-building-o"></i>
                        <span>企业团购</span>
                    </li>

                    <li>
                        <i class="fa fa-road"></i>
                        <span>F码通道</span>
                    </li>
                    <li>
                        <i class="fa fa-credit-card"></i>
                        <span>小米粉卡</span>

                    </li>
                    <li>
                        <i class="fa fa-refresh"></i>
                        <span>以旧换新</span>
                    </li>
                    <li>
                        <i class="fa fa-jpy"></i>
                        <span>话费充值</span>
                    </li>
                </ul>
                <!--右侧图片-->
                <div class="product-img">
                    <img src="src/product1.jpg" alt="">
                </div>
                <div class="product-img">
                    <img src="src/product2.jpg" alt="">
                </div>
                <div class="product-img">
                    <img src="src/product3.jpg" alt="">
                </div>
            </div>
        </section>
    </div>

    <!--第二个容器-->
    <div class="wrapper-second">
        <section>
            <!--小米闪购-->
            <div class="title">
                <h2>小米闪购</h2>
                <div class="btn-box">
                    <div id="btn-box-left">
                        <i class="fa fa-angle-left"></i>
                    </div>
                    <div id="btn-box-right">
                        <i class="fa fa-angle-right"></i>
                    </div>
                </div>
            </div>

            <div class="running-horse">
                <!--倒计时栏-->
                <div class="left">
                    <h4>24:00场</h4>
                    <img src="src/shangou.png" alt="">
                    <p>距离结束还有</p>
                    <div class="count-down">
                        <div id="hours">20</div><span>:</span>
                        <div id="minutes">30</div><span>:</span>
                        <div id="seconds">40</div>
                    </div>
                </div>
                <!--跑马灯-->
                <div class="right">
                    <div class="sroll-box" id="scrollBox">
                        <ul>
                            <li>
                                <img src="src/shangou_goods01.png" alt="">
                                <p>小米无线鼠标 Lite 黑色</p>
                                <p>简约设计 轻盈握感</p>
                                <p> 29元 <span>39元</span></p>
                            </li>
                            <li>
                                <img src="src/shangou_goods02.png" alt="">
                                <p>小米无线鼠标 Lite 黑色</p>
                                <p>简约设计 轻盈握感</p>
                                <p> 29元 <span>39元</span></p>
                            </li>
                            <li>
                                <img src="src/shangou_goods03.png" alt="">
                                <p>小米无线鼠标 Lite 黑色</p>
                                <p>简约设计 轻盈握感</p>
                                <p> 29元 <span>39元</span></p>
                            </li>
                            <li>
                                <img src="src/shangou_goods04.png" alt="">
                                <p>小米无线鼠标 Lite 黑色</p>
                                <p>简约设计 轻盈握感</p>
                                <p> 29元 <span>39元</span></p>
                            </li>
                            <li>
                                <img src="src/shangou_goods05.png" alt="">
                                <p>小米无线鼠标 Lite 黑色</p>
                                <p>简约设计 轻盈握感</p>
                                <p> 29元 <span>39元</span></p>
                            </li>
                            <li>
                                <img src="src/shangou_goods06.png" alt="">
                                <p>小米无线鼠标 Lite 黑色</p>
                                <p>简约设计 轻盈握感</p>
                                <p> 29元 <span>39元</span></p>
                            </li>
                            <li>
                                <img src="src/shangou_goods07.png" alt="">
                                <p>小米无线鼠标 Lite 黑色</p>
                                <p>简约设计 轻盈握感</p>
                                <p> 29元 <span>39元</span></p>
                            </li>
                            <li>
                                <img src="src/shangou_goods08.png" alt="">
                                <p>小米无线鼠标 Lite 黑色</p>
                                <p>简约设计 轻盈握感</p>
                                <p> 29元 <span>39元</span></p>
                            </li>
                            <li>
                                <img src="src/shangou_goods09.png" alt="">
                                <p>小米无线鼠标 Lite 黑色</p>
                                <p>简约设计 轻盈握感</p>
                                <p> 29元 <span>39元</span></p>
                            </li>
                            <li>
                                <img src="src/shangou_goods10.png" alt="">
                                <p>小米无线鼠标 Lite 黑色</p>
                                <p>简约设计 轻盈握感</p>
                                <p> 29元 <span>39元</span></p>
                            </li>
                            <li>
                                <img src="src/shangou_goods11.png" alt="">
                                <p>小米无线鼠标 Lite 黑色</p>
                                <p>简约设计 轻盈握感</p>
                                <p> 29元 <span>39元</span></p>
                            </li>
                            <li>
                                <img src="src/shangou_goods12.png" alt="">
                                <p>小米无线鼠标 Lite 黑色</p>
                                <p>简约设计 轻盈握感</p>
                                <p> 29元 <span>39元</span></p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>

</html>